<template>
  <div >
     <Scroll  :on-reach-bottom="handleReachBottom" :height="height" :distance-to-edge="[1,1]">
       <card  class="ivu-mb-16 ivu-ml-16" v-width="200" style="display: inline-block;" v-for="(item,index) in data" :key="index"> 
          <div @click="changeImg(item)">
            <div class="cardimg">
              <img class="imgurl" :src="item.content" alt="">
            </div>
          </div>
       </card>
        <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
     </Scroll>
     <Modal v-model="modalStatus" title="图片" footer-hide>
        <div v-if="detailData.patient_info" style="display:flex;">
          <div v-if="detailData.patient_info.user_name">姓名：<span>{{detailData.patient_info.user_name}}</span></div>
          <div  v-if="detailData.patient_info.gender_str" class="ivu-ml-16">性别：<span>{{detailData.patient_info.gender_str}}</span></div>
          <div  v-if="detailData.patient_info.wechat_id" class="ivu-ml-16">微信号：<span>{{detailData.patient_info.wechat_id}}</span></div>
          <div v-if="!detailData.patient_info.wechat_id&&detailData.patient_info.mobile.length>0" class="ivu-ml-16">手机号：<span >{{`${detailData.patient_info.mobile.length===0?'':detailData.patient_info.mobile.join(',')}`}}</span></div>
        </div>
        <div style="text-align: center;margin-bottom:20px;margin-top:10px">
          <Button type="primary" @click="downFileUrl">下载图片</Button>
        </div>
        <img style="width:100%" v-if="detailData.fileUrl" :src="detailData.fileUrl" alt="">
        <img style="width:100%" v-else :src="detailData.content" alt="">
     </Modal>
  </div>
</template>
<script>
 import { messageimageList, messageimageInfo, } from "../../api/TApi/index.js"
export default {
  data(){
    return{
      Message:false,
       height: null,
       modalStatus:false,
       params:{page: 1, pageSize: 25} ,
       data:[],
       id:'',
       detailData:[],
       url:''
    }
  },
  mounted () {
     this.url = process.env.VUE_APP_API
     this.initial()
      this.height = document.documentElement.clientHeight - 150
  },
  methods:{
      initial() {
                this.params.page = 1
                this.askData()
            },
      askData() {
          this.Message = false
          messageimageList(this.params).then(res=>{
              this.total = res.total
              this.data = res.list
          })
      },
    askDatas() {
        messageimageList(this.params).then(res=>{
            this.data.push(...res.list)
        })
    },
    handleReachBottom(){
        if (this.total > this.params.pageSize * this.params.page) {
            this.params.page++
            this.askDatas()
        } else {
            this.Message = true
        }
    },
    //点击下载
    changeImg(item){
      this.id=item.id
      this.getDetail()
      this.modalStatus=true
    },
    //获取详情
    getDetail(){
       messageimageInfo({id:this.id}).then(res=>{
            this.detailData=res
        })
    },
    downFileUrl() {
        window.open(this.url + `/v1/robot/index/download-image?id=${this.detailData.id}`);
          // var img = this.detailData.fileUrl;  //注意需要拼接域名访问哦~
          // const url = img;
          // let xmlhttp = new XMLHttpRequest();
          // xmlhttp.open("GET", url, true);
          // xmlhttp.responseType = "blob";
          // xmlhttp.onload = function () {
          //   if (this.status == 200) {
          //     const blob = this.response;
          //     const link = document.createElement("a");
          //     link.href = window.URL.createObjectURL(blob);
          //     link.download = '文件名称' + url.substring(url.lastIndexOf(".") + 1, url.length);
          //     //此写法兼容可火狐浏览器
          //     document.body.appendChild(link);
          //     const evt = document.createEvent("MouseEvents");
          //     evt.initEvent("click", false, false);
          //     link.dispatchEvent(evt);
          //     window.URL.revokeObjectURL(link.href);
          //     document.body.removeChild(link);
          //   }
          // };
          // xmlhttp.send();
    },
  }
}
</script>
<style scoped>

.imgurl{
  width: 100%;
  height: 250px;
  object-fit: contain;
}
</style>